<template>
  <div>
    <!-- 图片 -->
    <div class="index_image">
      <swiper
        v-model="demo01_index"
        loop:true
        :interval=2500
        :auto=true
        :show-dots="false"
      >
        <swiper-item
          v-for="(item, index) in bannerlist.imgUrls"
          :key="index"
          class="lunbodantye"
        >
          <img
            style="width:100%;height:100%;"
            class="swiper-img"
            @click="godetail(item)"
            :src="item.src"
          >
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>

<script>
import {
  Swiper,
  SwiperItem
} from 'vux'
export default {
  props: ['bannerlist'],
  data () {
    return {
      demo01_index: 0,
      swiperheight: 0
    }
  },
  components: {
    Swiper,
    SwiperItem
  },
  mounted () {
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    this.clientWidth = `${document.documentElement.clientWidth}` // document.body.clientWidth;
    //     console.log(this.clientHeight)
    //     console.log(this.clientWidth)
    window.onresize = function temp () {
      this.clientHeight = `${document.documentElement.clientHeight}`
    }
  },
  watch: {
    clientHeight: function () {
      this.changeFixed(this.clientHeight)
      this.swiperheight = parseInt(this.clientHeight) * 660 / 750 * 266 / 670
    }
  },
  methods: {
    godetail (item) {
      this.$emit('gobannerId', item)
    }
  }
}
</script>

<style lang="less" scoped>
.index_image {
  width: calc(100vw * 686 / 750);
  height: calc(100vw * 230 / 750);
  margin: 5px auto calc(100vw * 30 / 750) auto;
  border-radius: calc(100vw * 5 / 750);
  overflow: hidden;
  margin-bottom: 15px;
}
.lunbodantye {
  border-radius: 5px;
  overflow: hidden;
}
.index_image/deep/.vux-slider {
  height: calc(100vw * 230 / 750) !important;
}
.index_image/deep/.vux-swiper {
  height: calc(100vw * 230 / 750) !important;
}

.vux-swiper-item {
  height: calc(100vw * 230 / 750) !important;
}
.swiper-img {
  height: calc(100vw * 230 / 750) !important;
}
</style>
